<template>
  <div class="MessageManagement-CampusNoticecenter height100">
    <div class="flex-all pt10 pb10 pl12 pr12 bg-white height50">
      <div class="ct-head-left flex-al">
        <span class="left-line-orange mr10"></span>
        <span class="color-333 fs14">{{
          $t("views.Message.CampusNoticecenter.50ynokrngoc0")
        }}</span>
      </div>
      <div class="cr-head-right fs14">
        <el-button type="primary" size="mini" @click="linkToAdd()">{{
          $t("views.Message.CampusNoticecenter.50ynokrni1g0")
        }}</el-button>
      </div>
    </div>
    <div class="content-box bg-white flex1">
      <div class="flex-wrap pt12 pl12 pr12">
        <div class="flex-al mb12">
          <!-- <span class="mr10 fs14 color-666">{{
            $t("views.Message.CampusNoticecenter.50ynokrnigg0")
          }}</span> -->
          <div class="select-box" style="width: 170px">
            <el-select
              v-model="filter.GradeValue"
              clearable
              :placeholder="$t('views.Message.CampusNoticecenter.50ynokrniv80')"
              @change="handleSelectChange"
            >
              <el-option
                v-for="item in filter.GradeList"
                :key="item.noticetype_id"
                :label="item.noticetype_name"
                :value="item.noticetype_id"
              ></el-option>
            </el-select>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al mb12">
          <span class="mr10 fs14 color-666">{{
            $t("views.Message.CampusNoticecenter.50ynokrnj8g0")
          }}</span>
          <div class="select-box" style="width: 270px">
            <el-date-picker
              v-model="GradeTime"
              type="daterange"
              value-format="yyyy-MM-dd"
              :range-separator="
                $t('views.Message.CampusNoticecenter.50ynokrnjmw0')
              "
              :start-placeholder="
                $t('views.Message.CampusNoticecenter.50ynokrnk440')
              "
              :end-placeholder="
                $t('views.Message.CampusNoticecenter.50ynokrnkms0')
              "
              @change="submission"
            ></el-date-picker>
          </div>
        </div>
        <div class="lines ml16 mr16 mb12"></div>
        <div class="flex-al Inquire-box mb12">
          <div class="ipt-box" style="width: 220px">
            <el-input
              v-model="filter.keyword"
              clearable
              :placeholder="$t('views.Message.CampusNoticecenter.50ynokrnkzs0')"
              @clear="keySearch"
              @keyup.native.enter="keySearch"
            ></el-input>
          </div>
          <el-button
            type="primary"
            size="small"
            class="search-btn fs14"
            @click="keySearch"
            >{{
              $t("views.Message.CampusNoticecenter.50ynokrnlc80")
            }}</el-button
          >
        </div>
      </div>
      <div class="tableDiv" ref="auto_height_table">
        <switchTableCont
          :tableData="tableList"
          @handleColumnChange="handleColumnChange"
          @handSetting="handSetting"
        >
          <!-- 按钮操作组********start -->
          <el-table-column
            ref="fixedColumn"
            :label="$t('views.Message.CampusNoticecenter.50ynokrnln80')"
            align="center"
            width="120px"
            fixed="right"
          >
            <template slot-scope="scope">
              <!-- 下拉菜单 -->
              <el-dropdown
                class="user-name"
                trigger="click"
                @command="handleCommand"
                @visible-change="handClickDrop(scope.row)"
              >
                <!-- <div class="user-show">
                  <i class="mh-select"></i>
                </div>-->
                <el-button type="text" class="el-dropdown-link">
                  {{ $t("views.Message.CampusNoticecenter.50ynokrnly80") }}
                  <i class="mh-select"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item divided command="see">{{
                    $t("views.Message.CampusNoticecenter.50ynokrnm9c0")
                  }}</el-dropdown-item>
                  <el-dropdown-item divided command="edit">{{
                    $t("views.Message.CampusNoticecenter.50ynokrnmk00")
                  }}</el-dropdown-item>
                  <el-dropdown-item
                    divided
                    command="topping"
                    v-if="MessageDetail.notice_top != '1'"
                    >{{
                      $t("views.Message.CampusNoticecenter.50ynokrnmuk0")
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    divided
                    command="topping"
                    v-if="MessageDetail.notice_top == '1'"
                    >{{
                      $t("views.Message.CampusNoticecenter.50ynokrnn4o0")
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item
                    divided
                    command="recall"
                    v-if="MessageDetail.notice_status != '-1'"
                    >{{
                      $t("views.Message.CampusNoticecenter.50ynokrnnfo0")
                    }}</el-dropdown-item
                  >
                  <el-dropdown-item divided command="delete">{{
                    $t("views.Message.CampusNoticecenter.50ynokrnnrk0")
                  }}</el-dropdown-item>
                  <el-dropdown-item
                    divided
                    command="resend"
                    v-if="MessageDetail.notice_status == '-1'"
                    >{{
                      $t("views.Message.CampusNoticecenter.50ynokrno240")
                    }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <!-- <el-button type="text" size="mini" @click.native.prevent="handEdit(scope.row)">编辑</el-button>
              <el-button type="text" size="mini" @click.native.prevent="handDel(scope.row)">{{$t('views.Message.CampusNoticecenter.50ynokrnnrk0')}}</el-button>
              <el-button type="text" size="mini" @click.native.prevent="handRecall(scope.row)">{{$t('views.Message.CampusNoticecenter.50ynokrnnfo0')}}</el-button>-->
            </template>
          </el-table-column>
          <!-- 按钮操作组********end -->
        </switchTableCont>
        <!-- 分页 -->
        <el-pagination
          style="margin: 10px"
          :current-page.sync="curPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @current-change="curPageChange"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 查看通知详情 -->
    <el-drawer
      :title="$t('views.Message.CampusNoticecenter.50ynokrnod00')"
      :visible.sync="messageDetailVisible"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box messageDetail-box"
      :before-close="handleClose"
    >
      <div class="slider-content pAll20">
        <p class="info-title fs16 color-333 tc mb5">
          {{ oneMessageInfo.notice_title }}
        </p>
        <div class="info-small-title fs12 tc color-aaa">
          <span class="mr10">{{
            oneMessageInfo.staffer_cnname
              ? oneMessageInfo.staffer_cnname
              : $t("views.Message.CampusNoticecenter.50ynokrnors0")
          }}</span>
          <span class="mr10"
            >{{ $t("views.Message.CampusNoticecenter.50ynokrnp0k0") }}
            {{
              oneMessageInfo.organize_cnname
                ? oneMessageInfo.organize_cnname
                : $t("views.Message.CampusNoticecenter.add1")
            }}</span
          >
          <span>{{
            oneMessageInfo.notice_createtime
              ? oneMessageInfo.notice_createtime
              : $t("views.Message.CampusNoticecenter.50ynokrnpcg0")
          }}</span>
        </div>
        <div
          class="info-content mt20"
          v-html="MessageDetail.notice_connet"
        ></div>
        <a
          target="_blank"
          download
          class="download_files"
          :href="item.url"
          v-show="MessageDetail.notice_filelist"
          v-for="(item, index) in MessageDetail.notice_filelist"
          :key="index"
        >
          {{ item.name }}
          <br />
        </a>
      </div>
    </el-drawer>
    <!-- 查看阅读人数 -->
    <el-drawer
      :title="$t('views.Message.CampusNoticecenter.50ynokrnplo0')"
      :visible.sync="togglePeopleVis"
      direction="rtl"
      size="500px"
      :modal="false"
      custom-class="pop-slider--box togglePeople-box"
      :before-close="handleClose"
    >
      <div class="slider-content">
        <el-tabs v-model="showReadTab" @tab-click="ClickReadTab">
          <el-tab-pane :label="noreadpeople" name="second">
            <ul class="list_box">
              <li
                class="s_item"
                v-for="(item, index) in NoReadnoticePeolist"
                :key="index"
              >
                <div class="img">
                  <img
                    v-if="item.staffer_img != '' && item.staffer_img != null"
                    :src="item.staffer_img"
                  />
                  <img
                    v-else-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="photoImgWomen"
                  />
                  <img v-else :src="photoImgmen" />
                  <img
                    v-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="iconWommen"
                    class="position_img"
                  />
                  <img v-else :src="iconmen" class="position_img" />
                </div>
                <p>
                  {{ item.staffer_cnname }}
                  <em>({{ item.post_name }})</em>
                </p>
                <p>{{ item.school_cnname }}</p>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane :label="readedpeople" name="first">
            <ul class="list_box">
              <li
                class="s_item"
                v-for="(item, index) in noticePeolist"
                :key="index"
              >
                <div class="img">
                  <img
                    v-if="item.staffer_img != '' && item.staffer_img != null"
                    :src="item.staffer_img"
                  />
                  <img
                    v-else-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="photoImgWomen"
                  />
                  <img v-else :src="photoImgmen" />
                  <img
                    v-if="
                      item.staffer_sex ==
                      $t('common.Header.header.5167sp4cvno0')
                    "
                    :src="iconWommen"
                    class="position_img"
                  />
                  <img v-else :src="iconmen" class="position_img" />
                </div>
                <p>
                  {{ item.staffer_cnname }}
                  <em>({{ item.post_name }})</em>
                </p>
                <p>{{ item.school_cnname }}</p>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 删除通知 -->
    <popTips
      :dialogVisable="delMessage"
      :popTipsCont="popTips_del"
      @handConfirm="handleDel"
      @handCancel="delMessage = false"
      @handleCloseTip="delMessage = false"
    ></popTips>
    <!-- 撤回通知 -->
    <popTips
      :dialogVisable="recallMessage"
      :popTipsCont="popTips_recall"
      @handConfirm="handleRecall"
      @handCancel="recallMessage = false"
      @handleCloseTip="recallMessage = false"
    ></popTips>
    <!-- 重新发送 -->
    <popTips
      :dialogVisable="resendMessage"
      :popTipsCont="popTips_resend"
      @handConfirm="handleResend"
      @handCancel="resendMessage = false"
      @handleCloseTip="resendMessage = false"
    ></popTips>
    <!-- 置顶通知 -->
    <popTips
      :dialogVisable="topingMessage"
      :popTipsCont="popTips_top"
      @handConfirm="handleTop"
      @handCancel="topingMessage = false"
      @handleCloseTip="topingMessage = false"
    ></popTips>
    <!-- 查看适配职务数或校园数 -->
    <div class="small-dialog" v-if="showSuitSchool">
      <el-dialog
        :title="popBoxTitle"
        :visible.sync="showSuitSchool"
        width="500px"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <noBorderTableCont :tableData="suitSchoolTable"></noBorderTableCont>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="mini" @click="showSuitSchool = false"
            >{{ $t("views.Message.CampusNoticecenter.50ynokrnpug0") }}
            {{ $t("views.Message.CampusNoticecenter.50ynokrnq380") }}</el-button
          >
          <el-button size="mini" @click="showSuitSchool = false"
            >{{ $t("views.Message.CampusNoticecenter.50ynokrnqbg0") }}
            {{ $t("views.Message.CampusNoticecenter.50ynokrnqkk0") }}</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 查看适用园所 -->
    <div class="small-dialog" v-if="addGraden">
      <el-dialog
        :title="$t('views.Message.CampusNoticecenter.50ynokrnqt80')"
        :visible.sync="addGraden"
        width="900px"
        :before-close="handleClose"
      >
        <div class="dialog-content">
          <div class="tableDiv">
            <noBorderTableCont :tableData="tableAddGraden"></noBorderTableCont>
          </div>
        </div>
        <!-- <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            size="mini"
            :disabled="IDobj.length <= 0"
            @click="addPolicySchoolAction"
          >{{$t('views.Message.CampusNoticecenter.50ynokrnpug0')}} {{$t('views.Message.CampusNoticecenter.50ynokrnq380')}}</el-button>
          <el-button size="mini" @click="addGraden = false">{{$t('views.Message.CampusNoticecenter.50ynokrnqbg0')}} {{$t('views.Message.CampusNoticecenter.50ynokrnqkk0')}}</el-button>
        </span> -->
      </el-dialog>
    </div>
  </div>
</template>

<script>
import switchTableCont from "../../components/tables/switchTableCont.vue";
import noBorderTableCont from "../../components/tables/noBorderTableCont.vue";
import popTips from "@/components/common/popTips/popTips.vue";
import httpApi from "../../utils/http";
import noticeHttp from "./notice";

export default {
  name: "PersonManage-staffManage",
  components: {
    switchTableCont,
    noBorderTableCont,
    popTips,
  },
  data() {
    // var phone = (rule, value, callback) => {
    //   if (!value) {
    //     callback(new Error(this.$t('views.Message.CampusNoticecenter.50ynokrnr2c0')));
    //   } else if (!this.$Tool.isPhone(value)) {
    //     callback(new Error(this.$t('views.Message.CampusNoticecenter.50ynokrnras0')));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      hasNums: "",
      noNums: "",
      delMessage: false, //删除通知
      //删除通知****弹窗
      popTips_del: {
        btn_text1: this.$t("views.Message.CampusNoticecenter.50ynokrnrl00"),
        btn_text2: this.$t("views.Message.CampusNoticecenter.50ynokrnru80"),
        title: this.$t("views.Message.CampusNoticecenter.50ynokrns2g0"),
        context: this.$t("views.Message.CampusNoticecenter.50ynokrnsb00"),
      },
      recallMessage: false, //撤回通知
      resendMessage: false,
      popTips_recall: {
        btn_text1: this.$t("views.Message.CampusNoticecenter.50ynokrnrl00"),
        btn_text2: this.$t("views.Message.CampusNoticecenter.50ynokrnru80"),
        title: this.$t("views.Message.CampusNoticecenter.50ynokrnsjg0"),
        context: this.$t("views.Message.CampusNoticecenter.50ynokrnsro0"),
      },
      popTips_resend: {
        btn_text1: this.$t("views.Message.CampusNoticecenter.50ynokrnrl00"),
        btn_text2: this.$t("views.Message.CampusNoticecenter.50ynokrnru80"),
        title: this.$t("views.Message.CampusNoticecenter.50ynokrno240"),
        context: this.$t("views.Message.CampusNoticecenter.50ynokrnt0w0"),
      },
      topingMessage: false, //置顶通知
      popTips_top: {
        btn_text1: this.$t("views.Message.CampusNoticecenter.50ynokrnrl00"),
        btn_text2: this.$t("views.Message.CampusNoticecenter.50ynokrnru80"),
        title: this.$t("views.Message.CampusNoticecenter.50ynokrntc00"),
        context: this.$t("views.Message.CampusNoticecenter.50ynokrntkg0"),
      },
      paging: {
        total: 0,
        pageSize: 15,
        currentPage: 1,
        sizeArray: [15, 30, 45, 60],
      },
      messageDetailVisible: false, //查看通知详情
      togglePeopleVis: false, //查看阅读人数
      addGraden: false, // 查看园所
      showReadTab: "second", //查看阅读人数****切换
      showSuitSchool: false, //适配职务数或校园数
      userpic: require("../../assets/images/default-staff-men.png"), //用户默认头像
      oneMessageInfo: {}, //存储单条通知信息
      MessageDetail: {}, //存储个人信息
      //筛选
      GradeTime: [],
      filter: {
        GradeValue: "", //选择职等
        GradeList: [
          {
            value: this.$t("views.Message.CampusNoticecenter.50ynokrntuo0"),
            label: this.$t("views.Message.CampusNoticecenter.50ynokrnu600"),
          },
          {
            value: this.$t("views.Message.CampusNoticecenter.50ynokrnufw0"),
            label: this.$t("views.Message.CampusNoticecenter.50ynokrnuts0"),
          },
        ], //选择职等-下拉数据
        keyword: "", //关键词
      },
      // 表格数据
      tableList: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: true, //是否可以编辑列
          tableHeight: 0, //表格高度
          moduleName: "Message", //当前页面所属于模块的名称****一个模块是唯一的
          ColumnName: "CampusNotice", //当前页面的名称，通常与路由名称一致
        },
      },
      // 适用园所表格数据
      tableAddGraden: {
        // 表格的列
        columns: [],
        // 表格数据
        list: [],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: "300px", //表格高度
        },
      },
      // 分页
      curPage: 1,
      pageSize: 10,
      pageTotal: 0,

      noticePeolist: [], // 阅读人数详情----已读人数
      NoReadnoticePeolist: [], // 阅读人数详情----未读人数

      // 适配职务数或校园数标题
      popBoxTitle: "",
      // 适配职务数或校表格
      suitSchoolTable: {
        // 表格的列
        columns: [
          {
            fieldstring: "a1",
            fieldname: this.$t("views.Message.CampusNoticecenter.50ynokrnv6g0"),
            show: "1",
            // ismethod:true,//是否有事件
          },
          {
            fieldstring: "a2",
            fieldname: this.$t("views.Message.CampusNoticecenter.50ynokrnviw0"),
            show: "1",
          },
          {
            fieldstring: "a3",
            fieldname: this.$t("views.Message.CampusNoticecenter.50ynokrnvug0"),
            show: "1",
          },
        ],
        // 表格数据
        list: [
          {
            a1: "12323",
            a2: this.$t("views.Message.CampusNoticecenter.50ynokrnw580"),
            a3: "01428W",
          },
          {
            a1: "12323",
            a2: this.$t("views.Message.CampusNoticecenter.50ynokrnw580"),
            a3: "01428W",
          },
          {
            a1: "12323",
            a2: this.$t("views.Message.CampusNoticecenter.50ynokrnw580"),
            a3: "01428W",
          },
        ],
        options: {
          errortip: "", //空页面提示内容
          mutiSelect: false, //是否显示多选
          issetting: false, //是否可以编辑列
          tableHeight: "240px", //表格高度
        },
      },
      iconWommen: require("../../assets/images/icon/icon-person-women.png"),
      iconmen: require("../../assets/images/icon/icon-person-men.png"),
      photoImgWomen: require("../../assets/images/default-staff-women.png"), //默认女头像
      photoImgmen: require("../../assets/images/default-staff-men.png"), //默认男头像
    };
  },
  created() {
    this.slider = this.$store.state.Slider;
    this.getNoticeTypeList();
    this.messageList();
  },
  watch: {},
  computed: {
    noreadpeople() {
      return (
        this.$t("views.Message.CampusNoticecenter.50ynokrnwfo0") +
        this.noNums.toString().toString() +
        this.$t("views.Message.CampusNoticecenter.50ynokrnwqo0")
      );
    },
    readedpeople() {
      return (
        this.$t("views.Message.CampusNoticecenter.50ynokrnx1g0") +
        this.hasNums.toString() +
        this.$t("views.Message.CampusNoticecenter.50ynokrnwqo0")
      );
    },
  },
  methods: {
    // 查看阅读详情
    getReadInfoApi(id) {
      noticeHttp
        .getReadInfoApi({
          // school_id:''
          notice_id: id,
          p: this.paging.currentPage, //	第几页
          num: this.paging.pageSize, //	每页几条
        })
        .then((res) => {
          console.log(
            res,
            this.$t("views.Message.CampusNoticecenter.50ynokrnxcg0")
          );
          // if (res.data.error == 0) {
          //   this.$message({ message: "撤回成功", type: "success" });
          //   this.recallMessage = false;
          //   this.messageList();
          // } else {
          //   this.$message.error(res.data.errortip);
          // }
          this.hasNums = res.data.result.list.hasNums;
          this.noNums = res.data.result.list.noNums;
          this.noticePeolist = res.data.result.list.hasStafferList;
          this.NoReadnoticePeolist = res.data.result.list.noStafferList;
        });
    },
    handleSelectChange() {
      this.paging.currentPage = 1;
      this.messageList();
    },
    submission() {
      this.paging.currentPage = 1;
      this.messageList();
    },
    keySearch() {
      this.curPage = 1;
      this.messageList();
    },
    // 获取单条信息
    getNewsOneInfoApi() {
      console.log(this.oneMessageInfo);
      const id = this.oneMessageInfo.notice_id;
      // const id = (data.notice_id).toString()
      // const id = Number(data.notice_id)
      noticeHttp.getNewsOneInfoApi({ notice_id: id }).then((res) => {
        console.log(res);
        this.MessageDetail = res.data.result.list;
        console.log(
          this.MessageDetail,
          this.$t("views.Message.CampusNoticecenter.50ynokrnxn00")
        );
      });
    },
    // 获取消息列表
    messageList() {
      noticeHttp
        .messageList({
          keyword: this.filter.keyword, //关键词 标题 发布人
          noticetype_id: this.filter.GradeValue, //	通知类型ID
          starttime: this.GradeTime ? this.GradeTime[0] : "", //开始时间
          endtime: this.GradeTime ? this.GradeTime[1] : "", //	结束时间
          p: this.curPage, //	第几页
          num: this.pageSize, //	每页几条
          is_count: "", //是否需要总数 1-需要
          notice_class: 1, //消息类别 0-集团消息 1-校园消息
        })
        .then((res) => {
          console.log(res, "1```````````````````````````");
          const { field, list, allnum } = res.data.result;
          // this.notice.tableList.columns = field;
          let obj = this.$Tool.getStorage(
            "module" + [this.tableList.options.moduleName]
          );
          if (obj) {
            if (obj["show_" + [this.tableList.options.ColumnName]]) {
              this.tableList.columns =
                obj["show_" + [this.tableList.options.ColumnName]];
            } else {
              this.tableList.columns = field;
            }
          } else {
            this.tableList.columns = field;
          }
          this.pageTotal = Number(allnum);
          if (res.data.error == "0") {
            this.tableList.data = list;
            this.tableList.list = list;
          } else {
            this.tableList.data = [];
            this.tableList.list = list;
            this.tableList.options.errortip = res.data.errortip;
          }
        });
    },
    // 获取下拉菜单
    getNoticeTypeList() {
      httpApi
        .getNoticeTypeList({
          noticetype_class: 1,
        })
        .then((res) => {
          console.log(
            res,
            this.$t("views.Message.CampusNoticecenter.50ynokrnxx40")
          );
          this.filter.GradeList = res.data.result.list;
        });
    },
    //新增发布通知
    linkToAdd() {
      this.$router.push({ path: "/Message/CampusNotice/Add" });
    },
    // 确认删除
    handleDel() {
      console.log(this.$t("views.Message.CampusNoticecenter.50ynokrny7w0"));
      noticeHttp
        .modifyStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_status: -2,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({
              message: this.$t("views.Message.CampusNoticecenter.50ynokro0n80"),
              type: "success",
            });
            this.delMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 置顶
    handleTop() {
      console.log(this.$t("views.Message.CampusNoticecenter.50ynokro0xo0"));
      noticeHttp
        .modifyTopStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_top: this.MessageDetail.notice_top,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({ message: res.data.errortip, type: "success" });
            this.topingMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 撤回
    handleRecall() {
      console.log(this.$t("views.Message.CampusNoticecenter.50ynokro1e40"));
      noticeHttp
        .modifyStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_status: -1,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({
              message: this.$t("views.Message.CampusNoticecenter.50ynokro1no0"),
              type: "success",
            });
            this.recallMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 重新发送
    handleResend() {
      console.log(this.$t("views.Message.CampusNoticecenter.50ynokro1xc0"));
      noticeHttp
        .modifyStatusAction({
          notice_id: this.MessageDetail.notice_id,
          notice_status: 1,
        })
        .then((res) => {
          console.log(res);
          if (res.data.error == 0) {
            this.$message({
              message: this.$t("views.Message.CampusNoticecenter.50ynokro2aw0"),
              type: "success",
            });
            this.resendMessage = false;
            this.messageList();
          } else {
            this.$message.error(res.data.errortip);
          }
        });
    },
    // 获取个人消息列表
    getNotificationApi() {
      console.log(this.$t("views.Message.CampusNoticecenter.50ynokro2jo0"));
      noticeHttp
        .getNotificationApi({
          school_id: "",
        })
        .then((res) => {
          console.log(
            res,
            this.$t("views.Message.CampusNoticecenter.50ynokro2so0")
          );
          // if (res.data.error == 0) {
          //   this.$message({ message: "撤回成功", type: "success" });
          //   this.recallMessage = false;
          //   this.messageList();
          // } else {
          //   this.$message.error(res.data.errortip);
          // }
        });
    },
    // 修改阅读状态
    modifyNoticeReadAction() {
      console.log(this.$t("views.Message.CampusNoticecenter.50ynokro2jo0"));
      noticeHttp
        .modifyNoticeReadAction({
          // school_id:''
        })
        .then((res) => {
          console.log(
            res,
            this.$t("views.Message.CampusNoticecenter.50ynokrnxcg0")
          );
          // if (res.data.error == 0) {
          //   this.$message({ message: "撤回成功", type: "success" });
          //   this.recallMessage = false;
          //   this.messageList();
          // } else {
          //   this.$message.error(res.data.errortip);
          // }
        });
    },
    // 功能菜单点击
    handClickDrop(row) {
      console.log(row, 121212);
      this.oneMessageInfo = row;
      this.getNewsOneInfoApi();
    },
    // 功能菜单下拉
    handleCommand(command) {
      console.log(command, 23232);
      if (command == "see") {
        // 查看
        this.messageDetailVisible = true;
      } else if (command == "edit") {
        // 编辑
        // let id = "1"; //测试
        console.log(
          this.MessageDetail,
          this.$t("views.Message.CampusNoticecenter.50ynokro31g0")
        );
        const id = this.MessageDetail.notice_id;
        this.$router.push({
          // path: `/NoticeEdit?id=${id}&type=group`
          //  path: `/NoticeEdit?id=${scope.row.notice_id}&type=group`
          path: `/Message/NoticeEdit?id=${id}&type=campus&noticetype_class=1`,
        });
      } else if (command == "topping") {
        if (this.MessageDetail.notice_top == "1") {
          this.popTips_top.context = this.$t(
            "views.Message.CampusNoticecenter.50ynokro3b00"
          );
          this.popTips_top.title = this.$t(
            "views.Message.CampusNoticecenter.50ynokro3k40"
          );
        } else {
          this.popTips_top.context = this.$t(
            "views.Message.CampusNoticecenter.50ynokro3t80"
          );
          this.popTips_top.title = this.$t(
            "views.Message.CampusNoticecenter.50ynokrntc00"
          );
        }
        // 置顶
        this.topingMessage = !this.topingMessage;
      } else if (command == "recall") {
        // 撤回
        this.recallMessage = !this.recallMessage;
      } else if (command == "delete") {
        // 删除
        this.delMessage = !this.delMessage; //删除通知
      } else if (command == "resend") {
        console.log("resend");
        this.resendMessage = !this.resendMessage;
        // this.publish()
      }
    },

    // 点击表格中的内容
    handleColumnChange(v1, v2, v3) {
      console.log(v1, v2, v3);
      const id = v3.notice_id;
      if (v2.fieldstring == "read_info") {
        console.log(v2.fieldname);
        this.togglePeopleVis = true;
        this.getReadInfoApi(id);
      } else if (v2.fieldstring == "school_name") {
        this.addGraden = true;
      }
      // if (v2.isTitle) {
      //   //查看通知详情
      //   this.messageDetailVisible = true;
      // } else if (v2.isReadNum) {
      //   //查看阅读人数
      //   this.togglePeopleVis = true;
      // } else if (v2.isPostNum) {
      //   //适配职务数或校园数*************职务数
      //   this.popBoxTitle = "通知职务范围";
      //   this.showSuitSchool = true;
      // }
    },
    // 编辑列编辑提交
    handSetting(v) {
      console.log(v, 121313);
      this.messageList();
    },
    // 页码变化
    curPageChange(v) {
      this.curPage = v;
      this.messageList();
    },
    // pageSize改变
    pageSizeChange(v) {
      this.curPage = 1;
      this.pageSize = v;
      this.messageList();
    },
    // 重置表单
    resetForm(form) {
      this.$refs[form].resetFields();
    },

    // 侧边栏-----查看阅读人数***切换
    ClickReadTab(e) {
      this.showReadTab = e.name;
    },
    // 关闭弹框
    handleClose(done) {
      done();
    },
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs["auto_height_table"]) {
        this.tableList.options.tableHeight = this.$Tool.getTableHeight(
          this.$refs.auto_height_table.getBoundingClientRect().top + 52
        );
      }
    });
  },
};
</script>

<style lang="less">
.MessageManagement-CampusNoticecenter {
  .mh-select {
    font-size: 12px;
    transform: scale(0.4);
    display: inline-block;
  }
  .mh-select::before {
    color: #909399;
  }
}
// 侧边栏样式
.togglePeople-box,
.messageDetail-box {
  .slider-content {
    // padding: 10px 20px 20px 20px;
    .el-tree-node__content:hover {
      color: #f78f0e;
    }

    .el-tabs__nav-scroll {
      padding-left: 20px;
      background: rgba(240, 244, 249, 1);
    }

    .el-tabs__content {
      padding: 10px 20px 20px 20px;
    }

    .el-tabs__header {
      margin: 0;
    }

    .el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    .download_files {
      display: block;
      // display: inline-block;
      padding: 15px 0 0;
      font-size: 16px;
      color: #0ea8f7;
    }
    // 阅读人数详情列表样式
    .list_box {
      display: flex;
      flex-wrap: wrap;
      .s_item {
        width: 50%;
        display: flex;
        margin-bottom: 25px;
        flex-direction: column;
        align-items: flex-start;
        text-align: center;
        .img {
          margin: 0 auto;
          position: relative;
          img {
            width: 50px;
            height: 50px;
            overflow: hidden;
            margin: 0 auto;
            border-radius: 50%;
          }
          .position_img {
            position: absolute;
            display: inline-block;
            top: -3px;
            right: -3px;
            width: 14px;
            height: 14px;
          }
        }
        p {
          padding-top: 6px;
          font-size: 14px;
          color: #333;
          width: 100%;
          em {
            color: #aaa;
            font-style: normal;
          }
        }
      }
    }
  }
}

.el-table__fixed-right-patch {
  // width: 0!important;
  // position: static!important;
}
</style>
